<link rel="stylesheet" href="../../css/spot.css">
<link rel="stylesheet" href="../../assets/css/datepicker.min.css">
<style type="text/css">
    .Date_lr{
        width:100%;
        text-align: center;
        overflow: hidden;
    }
    .Date_lr2{
        width: 47%;
        text-align: center;
        overflow: hidden;
    }

    .Date_lr2 input {
        border: none;
        width: 100%;
    }
    #checkinoutone{
        width: 100%;
        height: 75%;
        position: relative;
        display: -webkit-box;
        float: right;
    }
    #selectone {
        width: 100%;
        overflow: hidden;
    }
    #selectone p{line-height:25px;color: #999;font-size:12px;}
    #startDateone{
        position: absolute;
        left: 0;margin: 0 auto;
        width: 100%;
        text-align: center;
        font-size: 1.5rem;
        color: #333333;
        font-weight: 400;
        border: none;
    }
    .mask_calendar {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        z-index: 9999;
    }
    .mask_calendarone{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        z-index: 9999;
    }
    .calendar {
        height: 50%;
        width: 100%;
        position: fixed;
        bottom: 50%;
        -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
        transform: translateY(50%);
        left: 0;
    }
    .calendarone {
        height: 50%;
        width: 100%;
        position: fixed;
        bottom: 50%;
        -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
        transform: translateY(50%);
        left: 0;
    }
    .calendarli{
        width: 44%;
        overflow: hidden;
        margin-left: 0;
    }
    #firstSelect {
        width: 100%;
        display: none;
    }
    @keyframes slideInDown {
        from {
            transform: translate3d(0, -100%, 0);
            visibility: visible;
        }

        to {
            transform: translate3d(0, 0, 0);
        }
    }
</style>
<div id="wholestyle" class="wholestyle">
    <div class="spothead">
        <ul class="spotul">
            <li class="spotli">
                <div class="select_contain">
                    <div class="select_item left">
                        <div>
                            <div class="select_result"  id="acttime">

                                <div>
                                    <span id="chooseresult" class="fontstyle"><%=timesize%></span>
                                </div>
                                <div class="triangle" style="margin-right: -13%"></div>
                            </div>
                            <ul class="timeframe">
                                <li>上午</li>
                                <li>下午</li>
                                <li>一天</li>
                                <li>自定义</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li class="calendarli">
                <div class="select_contain">
                    <div class="select_item left">
                        <div>
                            <div id="checkinoutone">
                                <div id="selectone">
                                    <div class="Date_lr" style="float:left;">
                                        <input id="startDateone" type="text" value="" style="" readonly>
                                    </div>
                                    <div class="triangle"></div>
                                </div>
                            </div>

                            <div id="firstSelect">
                                <div class="Date_lr2" style="float:left;">
                                    <input id="startDate" type="text" value=""style="" readonly>
                                </div>
                                <span>-</span>
                                <div class="Date_lr2" style="float:right;">
                                    <input id="endDate" type="text" value="" style="" readonly>
                                </div>
                                <div class="triangle2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="spotli">
                <div class="select_contain">
                    <div class="select_item left">
                        <div>
                            <div class="select_result" id="typechoose">
                                <div><span id="choosetype" class="fontstyle" style="text-indent: 5px">类型</span></div>
                                <div class="triangle"></div>
                            </div>
                            <ul class="timeframe" id="typewan" >
                                <li>会议</li>
                                <li>餐饮</li>
                                <li>住宿</li>
                                <li>游玩</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="mask_calendar">
        <div class="calendar"></div>
    </div>
    <div class="mask_calendarone">
        <div class="calendarone"></div>
    </div>
    <div class="spotlist">
        <ul id="shoplist">
            <%for(var i=0;i<datas.length;i++){%>
            <li>
                <div class="spotmes">
                    <div class="spotimg">
                        <img src="<%=datas[i].goodimg%>" alt="" width="100%">
                    </div>
                    <div class="spotdetail">
                        <div class="spotspan">
                            <span><%=datas[i].name%></span>
                        </div>
                        <div class="spotlivelihood">
                            <span class="spottype"><%=datas[i].type%></span>
                        </div>
                        <div class="timemodule">
                            <div class="spotfee">
                                <span class="spotrmb">￥</span><span class="spotmount"><%=datas[i].price%></span>/天起
                                <br><s style="font-size: 1.2rem;color: #666">￥</s><s style="font-size: 1.2rem;color: #666"><%=datas[i].discount%></s>
                            </div>
                            <%if(datas[i].isremained == false){%>
                            <div class="spotspecs">
                                <div class="spotchoose" style="background-color: #b8b8b8">
                                    选择规格...
                                </div>
                            </div>
                            <%}else{%>
                            <div class="spotspecs" onclick="SHOP.choosespecs('<%=datas[i].id%>')">
                                <div class="spotchoose">
                                    选择规格...
                                </div>
                            </div>
                            <%}%>
                        </div>
                    </div>
                </div>
            </li>
            <%}%>
        </ul>
        <!--<div>-->
        <!--<button onclick="SHOP.addshoplist()">添加</button>-->
        <!--<div>-->
        <!--<input id="tickername" placeholder="name" type="text">-->
        <!--<input id="ticketdes" placeholder="desc" type="text">-->
        <!--<input id="ticketprice" placeholder="price" type="text">-->
        <!--<input id="tickettype" placeholder="type" type="text">-->
        <!--<input id="specialtip" placeholder="tip" type="text">-->
        <!--</div>-->
        <!--</div>-->
    </div>
</div>


<div class="backcolor">
    <div></div>
</div>

<div id="goodspec">
    <div class="goodsdesc">
        <span id="ticketspec" class="goodsword"></span>
        <div class="goodprice">
            <div class="goodsslogan">
                <span id="tickettip"></span>
            </div>
            <div class="spotfee1">
                <span id="singleprice" class="spotrmb">￥</span>
                <span id="ticketprice" class="spotmount"></span>
                <span class="spotmount"></span>/人/天起
            </div>
        </div>
    </div>
    <div class="middleone"></div>

    <ul class="select">
        <li class="first">人数</li>
        <li class="jian" onclick="SHOP.count('jian')">-</li>
        <li class="count" id="count">1</li>
        <li class="add" onclick="SHOP.count('add')">+</li>
    </ul>
    <!--<div class="goodsdetail">-->
        <!--<div class="peopletype">-->
            <!--<div class="people">-->
                <!--<div class="peoplename">-->
                    <!--<div class="peoplestyle"><span>人数</span></div>-->
                <!--</div>-->
                <!--<div class="peoplenum">-->
                    <!--<div class="peoplestyle">-->
                        <!--<div class="gw_num">-->
                            <!--<em class="jian">-</em>-->
                            <!--<input id="count" type="text" value="1" class="num"/>-->
                            <!--<em class="add">+</em>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <div class="prices">
        <div class="pricebottom">
            <div class="summoney">
                合计:<span class="spotrmb">￥<%=%></span>
                <span id="summoney" class="spotmount"></span>
            </div>
            <div class="goodssave">
                <div>
                    <div class="cart">
                        加入购物车
                    </div>
                    <div class="reserve">
                        立即预定
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        choose();
        timeone();
        timetwo();
    })
    function choose() {
        $(".backcolor").click(function (event) {
            $("#goodspec").hide();
            $(".backcolor").hide();
            $("#bar").show();
        });
        $(document).click(function(){
            $(".select_module_con ul").slideUp();
        })
        var module=$(".select_result");
        module.click(function(e){
            var id = e.target.id;
            e.stopPropagation();
            var ul=$(this).next();
            ul.stop().slideToggle();
            ul.children().click(function(e){
                e.stopPropagation();
                var result = $(this).text();
                $('#'+id).text(result);
                ul.stop().slideUp();
                if(result == '上午' || result == '下午' || result == '一天'){
                    $('#checkinoutone').show();
                    $('#firstSelect').hide();
                }else if(result == '自定义') {
                    $('#checkinoutone').hide();
                    $('#firstSelect').show();
                }
                var timeone = '';
                var startDate = '';
                var endDate = '';
                if( $("#checkinoutone").css("display")=='none' ){
                     startDate = $('#startDate').val();
                     endDate = $('#endDate').val();
                }
                if($("#firstSelect").css("display")=='none'){
                    timeone = $('#startDateone').val();
                }
                var timezone = $('#chooseresult').text();
                var type = $('#choosetype').text();
//                $.get('/scenicspot/findgoods?timeone=' +timeone+'&startDate='+startDate+'&endDate='+endDate+'&timezone='+timezone+'&type='+type+'&spotid='+'AT016', function (res) {
//                    // shopArray = res.data;
//                    seajs.use("/script/scenicspot/shoplist", function (shop) {
//                        $("#scenicbody").html(new EJS({url: "/views/scenicspot/shoplist.ejs"}).render({
//                            datas: res.datas,
//                            time:'',
//                            timesize:'活动时长'
//                        }));
//                        SHOP = shop;
//                    });
//                })

                $.ajax({
                    url: '/scenicspot/findgoods',
                    type: 'GET',
                    data: {
                        timezone:timezone,
                        type:type,
                        timeone:timeone,
                        startDate:startDate,
                        endDate:endDate,
                        spotid:'AT016'
                    },
                    success: function (res) {
                        if (!res.success) {
                            alert(res.msg);
                            return;
                        }else{
                            var shoplist = '';
                            var data = res.datas;
                            for (i = 0; i < data.length; i++) {
                                shoplist += '<li><div class="spotmes"><div class="spotimg"><img src="'+data[i].goodimg+'" alt="" width="100%"></div>';
                                shoplist += '<div class="spotdetail"><div class="spotspan"><span>"'+data[i].name+'"</span></div><div class="spotlivelihood">';
                                shoplist += '<span class="spottype">"'+data[i].type+'"</span></div><div class="timemodule"><div class="spotfee">';
                                shoplist += '<span class="spotrmb">￥</span><span class="spotmount">"'+data[i].price+'"</span>/天起';
                                shoplist += '<br><s style="font-size: 1.2rem;color: #666">￥</s><s style="font-size: 1.2rem;color: #666">"'+data[i].discount+'"</s></div>';
                                if(data[i].isremained==false){
                                    shoplist += '<div class="spotspecs"><div class="spotchoose" style="background-color: #b8b8b8">选择规格...</div></div>';
                                }else {
                                    shoplist += '<div class="spotspecs" onclick="SHOP.choosespecs( "'+data[i].id+'"+)"><div class="spotchoose">选择规格...</div></div>'
                                }
                                shoplist += '</div></div></div></li>';
                            }
                            if (shoplist) {
                                $('#shoplist').empty();
                                $('#shoplist').append(shoplist);
                            }
                        }
                    }
                })
            })
        })
        $(".spotlist").click(function () {
            $(".timeframe").hide();

        })
    }
    function timeone() {
        $('#mask_calendar').hide();
        $('#selectone').on('click',function () {
            $('.mask_calendarone').show();
            $(".backcolor").css("opacity", "0.7");
            $(".backcolor").css("display", "block");
            $('.sizechoose').css({'height':'60%'})
            $('.sizechoose').css({'width':'86%'})
        });
        $('.mask_calendarone').on('click',function (e) {
            if(e.target.className == "mask_calendarone"){
                $('.calendarone').slideUp(200);
                $('.mask_calendarone').fadeOut(200);
                $(".backcolor").hide();
            }
        })

        $('#selectone').calendarSwitchOne({
            selectors : {
                sections : ".calendarone"
            },
            index : 4,      //展示的月份个数
            animateFunction : "slideToggle",        //动画效果
            controlDay:true,//知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber : "365",     //控制天数
            comeColor : "#2EB6A8",       //时选择间颜色
            callback :function(){//回调函数
                $('.mask_calendarone').fadeOut(200);
            }  ,
            comfireBtn:'.comfire'//确定按钮的class或者id
        });
        var b=new Date();
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;
        $('#startDateone').val(ye+'-'+mo+'-'+da);
    }
    
    function timetwo() {
        $('#mask_calendarone').hide();
        $('#firstSelect').on('click',function () {
            $('.mask_calendar').show();
            $(".backcolor").css("opacity", "0.7");
            $(".backcolor").css("display", "block");
            $('.sizechoose').css({'height':'60%'})
            $('.sizechoose').css({'width':'86%'})
        });
        $('.mask_calendar').on('click',function (e) {
            if(e.target.className == "mask_calendar"){
                $('.calendar').slideUp(200);
                $('.mask_calendar').fadeOut(200);
                $(".backcolor").hide();
            }
        })
        $('#firstSelect').calendarSwitch({
            selectors : {
                sections : ".calendar"
            },
            index : 4,      //展示的月份个数
            animateFunction : "slideToggle",        //动画效果
            controlDay:true,//知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber : "90",     //控制天数
            comeColor : "#2EB6A8",       //入住颜色
            outColor : "#2EB6A8",      //离店颜色
            comeoutColor : "#E0F4F2",        //入住和离店之间的颜色
            callback :function(){//回调函数
                $('.mask_calendar').fadeOut(200);
                var startDate = $('#startDate').val();  //入住的天数
                var endDate = $('#endDate').val();      //离店的天数
                var NumDate = $('.NumDate').text();    //共多少晚
                //下面做ajax请求
                //show_loading();
                /*$.post("demo.php",{startDate:startDate, endDate:endDate, NumDate:NumDate},function(data){
                    if(data.result==1){
                        //成功
                    } else {
                        //失败
                    }
                });*/
            }  ,
            comfireBtn:'.comfire'//确定按钮的class或者id
        });
        var b=new Date();
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;
        $('#startDate').val(ye+'-'+mo+'-'+da);
        b=new Date(b.getTime()+24*3600*1000);
        var ye=b.getFullYear();
        var mo=b.getMonth()+1;
        mo = mo<10?"0"+mo:mo;
        var da=b.getDate();
        da = da<10?"0"+da:da;
        $('#endDate').val(ye+'-'+mo+'-'+da);
    }
</script>